html {
    font-size: 16px;
}

.login-box {
    background-size: cover;
    height: 6.25rem; /* 100vh / 16 = 6.25rem */
}

.login-nav {
    height: 3.125rem; /* 50px / 16 = 3.125rem */
    line-height: 3.125rem;
}

.login-logo {
    text-align: center;
    box-sizing: border-box;
    padding: 3.125rem 0; /* 50px / 16 = 3.125rem */
}

.tab-box {
    width: 14.375rem; /* 230px / 16 = 14.375rem */
    margin: 0 auto;
}

.form-item {
    width: 18.75rem; /* 300px / 16 = 18.75rem */
    text-align: center;
    margin: 1.25rem auto; /* 20px / 16 = 1.25rem */
}

#getcode-btn {
    color: rgb(22, 119, 255);
}

video {
    border: none;
    outline: none;
    background: none;
    padding: 0;
    margin: 0;
    display: block;
}

.face-box {
    text-align: center;
    margin: 0 auto;
}

.face-video {
    width: 15.625rem; /* 250px / 16 = 15.625rem */
    height: 15.625rem;
    border-radius: 50%;
    object-fit: cover;
    margin: 0.3125rem auto; /* 5px / 16 = 0.3125rem */
}

.placeholder-box {
    height: 14.375rem; /* 230px / 16 = 14.375rem */
}

.placeholder-box img {
    margin: 0.9375rem auto; /* 15px / 16 = 0.9375rem */
}

footer {
    width: 100vw;
    text-align: center;
    position: absolute;
    bottom: 1.25rem; /* 20px / 16 = 1.25rem */
}

footer .content {
    font-size: 0.8125rem; /* 13px / 16 = 0.8125rem */
    color: rgb(153, 153, 153);
}